<!DOCTYPE html>
<html>

<head th:include="include :: header"></head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>产品新装箱操作</h5>
            </div>
            <div class="ibox-content">
                <form method="POST" class="form-horizontal">

                    <!--<div class="row">-->
                        <!--<div class="col-xs-3 text-right bold">扫码数量：</div>-->
                        <!--<div class="col-xs-6"><input type="number" class="form-control num" type="number"/></div>-->
                    <!--</div>-->

                    <div class="form-group">
                        <label class="col-sm-2 control-label">选择产品：</label>
                        <div class="col-sm-6">
                            <select id="productId" name="productId" onchange="getBoxSize()" class="form-control">

                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">录入二维码数据：</label>

                        <div class="col-sm-6">
                            <input type="text" id="smallCode" class="form-control"
                                   placeholder="支持手持录入和扫码录入,手动录入后需按下回车键"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">录入外箱码：</label>

                        <div class="col-sm-6">
                            <input type="text" id="bigCode" class="form-control" placeholder="手动生成或录入已有外箱码">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label"></label>

                        <div class="col-sm-6">
                            <button class="btn" type="button" onclick="getNum()"><i
                                    class="glyphicon glyphicon-barcode"></i>手动生成一个外箱码
                            </button>
                        </div>
                    </div>



                    <div class="codeList">
                        <div class="tip">
                            <span>已扫条数：<span class="count red" id="count">0</span></span>
                        </div>
                        <div class="tag">
                            <ul class="taglist" id="tagList">
                            </ul>
                        </div>

                    </div>

                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <div class="col-sm-4 col-sm-offset-2">
                            <button class="btn btn-primary" type="button" onclick="submitSmallRecord()"><i
                                    class="glyphicon glyphicon-ok"></i>确认装箱
                            </button>

                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div th:include="include :: footer"></div>

<script type="text/javascript">

    $(function () {
        initProduct()
    })

    function initProduct() {
        getProduct(null)
        getBoxSize()
    }

//    function reBoxSize() {
//
//    }

    var data = ''
    var dataArray = new Array()
    var size = 0;


    $("#smallCode").keyup(function (event) {
        if (event.keyCode == 13) {
            getData()
        }
    });


    function getBoxSize() {
        size = $("#productId option:selected").attr("box");
        $("#count").text(size+"/"+dataArray.length)
    }

    function getData() {
        if (dataArray.length<size){
            var val = $("#smallCode").val();
            var result = val.split('=')
            var resultNum = "";
            if (result.length>=2) {
                resultNum = result[1]
            }else{
                resultNum = result[0]
            }

            $("#smallCode").val("")
            if(dataArray.indexOf(resultNum)==-1) {
                dataArray.push(resultNum)
                var index = dataArray.length-1
                $("#tagList").append('<li value=' + dataArray[index] + '>' + dataArray[index] + '<span onclick="deleteLi('+index+')"><i class="fa fa-remove" ></i></span></li>');
                $("#count").text(size+"/"+dataArray.length)
            }
        }
    }

    function deleteLi(index) {
        var liVal = $("#tagList>li").eq(index).val();
        dataArray.splice(dataArray.indexOf(liVal),1)
        $("#tagList>li").eq(index).hide()
        $("#count").text(size+"/"+dataArray.length)
    }


    function getNum() {
        var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
        var nums = "";
        for (var i = 0; i < 12; i++) {
            var id = parseInt(Math.random() * 10);
            nums += chars[id];
        }
//        return nums;
        $("#bigCode").val(nums)
    }

    function initData(){
        var smallCode = $("#bigCode").val()
        var productId = $("#productId").val()
        var obj = {"smallCodes":dataArray,"bigCode":smallCode,"productId":productId}
        return obj
    }

    function submitSmallRecord() {
//        getData()
        var obj = initData();
        $.ajax({
            cache : true,
            type : "POST",
            dataType: "JSON",
            contentType : 'application/json',
            url : getContext()+"/small_code/smallRecord/saveRecordAndProduct",
            data : JSON.stringify(obj),
            async : false,
            error : function(request) {
                parent.layer.alert("Connection error");
            },
            success : function(data) {
                if (data.code == 0) {
                    parent.layer.msg("操作成功");
                    parent.reLoad();
                    var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
                    parent.layer.close(index);

                } else {
                    parent.layer.alert(data.msg)
                }

            }
        });
    }
</script>
</body>

</html>